<template>
  <div class="my-login">
    <el-row class="my-logo-top2 hidden-md-and-up" type="flex" justify="center" align="middle">
      考试报名系统
    </el-row>
    <el-row class="my-logo-top hidden-sm-and-down" type="flex" align="middle">
      <el-col :md="{span:3, offset:1}" :lg="{span:2, offset:1}" :xl="{span:2, offset:1}">
        <el-row type="flex" justify="center" align="middle">
          <el-image class="my-top-icon" fit="fill" :src="logoUrl" />
        </el-row>
      </el-col>
      <!-- 当屏幕太小时，Logo图标会被隐藏掉 -->
      <el-col
        :xl="{span:8, offset:5}"
        :lg="{span:10, offset:4}"
        :md="{span:12, offset:2}"
        class="my-top-text"
      >
        考试报名系统
      </el-col>
      <!-- 动态适应屏幕变化的导航页 -->
    </el-row>
    <!--    <el-divider></el-divider>-->
    <el-row type="flex" justify="center" align="middle" class="my-main">
      <el-col style="width: 350px">
        <transition name="card" enter-active-class="animate__animated animate__fadeInUp">
          <el-card v-if="cardShow" class="my-login-card">
            <el-row slot="header" type="flex" justify="center" class="login-card-header">
              考试报名登录
            </el-row>
            <el-form ref="loginForm" :model="loginForm" :rules="loginRules" auto-complete="on" :status-icon="true" class="my-form">
              <el-form-item prop="username">
                <el-input
                  v-model="loginForm.username"
                  type="text"
                  placeholder="手机号"
                  tabindex="1"
                  auto-complete="on"
                  name="username"
                >
                  <span slot="prepend" class="my-icon-setting">
                    <i class="el-icon-mobile-phone" />账号
                  </span>
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  v-model="loginForm.password"
                  type="password"
                  placeholder="密码"
                  name="password"
                  tabindex="2"
                  auto-complete="on"
                  show-password
                  @keyup.enter.native="eventLogin"
                >
                  <span slot="prepend" class="my-icon-setting">
                    <i class="el-icon-key" />密码
                  </span>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-row type="flex" justify="space-between">
                  <el-button type="text" @click="dialogRegister = true">还没有注册？</el-button>
                  <el-button type="text" @click="dialogForget = true">忘记密码了？</el-button>
                </el-row>
                <el-button :loading="loading" type="primary" style="width: 100%" @click.native.prevent="eventLogin">
                  登录
                </el-button>
              </el-form-item>
            </el-form>
            <el-dialog
              :visible.sync="dialogRegister"
              :center="true"
              width="370px"
              :close-on-click-modal="false"
              :before-close="dialogRegisterBeforeCloseEvent"
              @close="dialogRegisterCloseEvent"
            >
              <h2 slot="title">账号注册</h2>
              <student-exam-register ref="examReg" />
            </el-dialog>
            <el-dialog
              ref="forgetDialog"
              :visible.sync="dialogForget"
              :center="true"
              width="370px"
              :close-on-click-modal="false"
              :before-close="dialogForgetBeforeCloseEvent"
              @close="dialogForgetCloseEvent"
            >
              <h2 slot="title">密码找回</h2>
              <transition
                name="forget-step"
                mode="out-in"
                leave-active-class="animate__animated animate__fadeOut"
                enter-active-class="animate__animated animate__fadeIn"
              >
                <component :is="selectStep[forgetStep - 1]" ref="forStep" @stepChangeEvent="forgetStepIndex" />
              </transition>
              <div slot="footer">
                <el-steps class="forget-el-steps" :active="forgetStep - 1" align-center finish-status="success">
                  <el-step title="确认账号" />
                  <el-step title="输入验证码" />
                  <el-step title="修改密码" />
                  <el-step title="完成" />
                </el-steps>
              </div>
            </el-dialog>
          </el-card>
        </transition>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import plan from '@/assets/images/plan.jpeg'
import baseRegister from '@/views/login/components/register'

import baseForgetOne from '@/views/login/components/forgetOne'
import baseForgetTwo from '@/views/login/components/forgetTwo'
import baseForgetThree from '@/views/login/components/forgetThree'
import baseForgetFour from '@/views/login/components/forgetFour'

import { validateEmptyPassword } from '@/utils/validate-tools'

export default {
  name: 'Login',
  components: {
    studentExamRegister: baseRegister,
    studentExamForgetOne: baseForgetOne,
    studentExamForgetTwo: baseForgetTwo,
    studentExamForgetThree: baseForgetThree,
    studentExamForgetFour: baseForgetFour
  },
  data() {
    return {
      logoUrl: plan,
      loading: false,
      showPass: false,
      dialogRegister: false,
      dialogForget: false,
      cardShow: false,
      forgetStep: 1,
      selectStep: [
        'student-exam-forget-one',
        'student-exam-forget-two',
        'student-exam-forget-three',
        'student-exam-forget-four'
      ],
      selectRef: [
        'forgetOne', 'forgetTwo', 'forgetThree', 'forgetFour'
      ],
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        // username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validateEmptyPassword }]
      }
    }
  },
  mounted() {
    this.cardShow = true
  },
  methods: {
    // 登录提交事件
    eventLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          const that = this
          setTimeout(() => {
            that.$store.dispatch('user/login', that.loginForm).then(() => {
              this.$refs.loginForm.resetFields()
              that.$router.push({ path: that.redirect || '/' })
              that.loading = false
            }).catch(error => {
              that.loading = false
              if (error.non_field_errors) {
                this.$message({
                  message: '用户名或者密码错误',
                  type: 'error',
                  duration: 3000
                })
              } else {
                this.$message({
                  message: '发生了未知错误, 请联系客服人员处理',
                  type: 'error',
                  duration: 3000
                })
              }
            })
          }, 3)
        } else {
          return false
        }
      })
    },
    // 注册和忘记的关闭阻止事件
    dialogRegisterBeforeCloseEvent(done) {
      this.$confirm('注册尚未完成，退出会丢失表单内容，是否确认？', '操作提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'warning',
          message: '你取消了注册.'
        })
        done()
      }).catch(() => {})
    },
    dialogForgetBeforeCloseEvent(done) {
      if (this.forgetStep === 4 || this.forgetStep === 1) {
        done()
      } else {
        this.$confirm('找回密码进行中，确认要退出吗？', '操作提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'warning',
            message: '你取消了密码找回.'
          })
          done()
        }).catch(() => {})
      }
    },
    // 注册和忘记的关闭回调事件
    dialogForgetCloseEvent() {
      this.forgetStep = 1
      this.$refs.forStep.clearAllData()
    },
    dialogRegisterCloseEvent() {
      this.$refs.examReg.clearAllData()
    },
    // 忘记密码的父组件接受子组件的回调函数
    forgetStepIndex(stepIndex) {
      // console.log('stepIndex:' + stepIndex)
      if (stepIndex !== 5) {
        this.forgetStep = stepIndex
      } else {
        this.forgetStep = stepIndex
        this.dialogForget = false
      }
    }
  }

}
</script>

<style scoped>

.my-logo-top {
  background: rgba(64, 158, 255, 0.79);
  box-shadow: 0 6px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  font-size: 35px;
  color: white;
  text-align: center;
  vertical-align: middle;
}
.my-logo-top2 {
  background: rgba(64, 158, 255, 0.79);
  box-shadow: 0 6px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  font-size: 25px;
  color: white;
  text-align: center;
  vertical-align: middle;
  height: 50px;
}

.my-top-icon {
  /*margin-top: 10px;*/
  height: 100px;
  width: 100px;
}

.my-login-card {
  margin-top: 50%;
}
.my-login {
  background-image: url('../../assets/images/img.png');
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
}
.login-card-header {
  text-align: center;
  vertical-align: middle;
  color: rgba(64, 158, 255, 0.79);
  font-size: 25px;
}
</style>
